<template>
  <div class="main">
    <img :src="require('@/assets/bigdata/img/mssj.png')" >
  </div>
</template>

<!--<template>-->
    <!--<el-container class="custom-waterDataAnalysis-container">-->
      <!--<el-header>-->
        <!--<div class="custom-header-container">事件管理</div>-->
      <!--</el-header>-->
      <!--<div class="SjMain">-->
        <!--<div class="SjmainLeft">-->
          <!--<div class="mainLeftTop">-->
            <!--<div class="ceng1"></div>-->
            <!--<div id="mainLeftTopE"></div>-->
          <!--</div>-->
          <!--<div class="mainLeftCenter">-->
            <!--<div class="ceng2"></div>-->
            <!--<div class="titleMainLeftCenter"></div>-->
            <!--<div class="textMainLeftCenter">实时动态</div>-->
            <!--<div style="display: flex">-->
              <!--<div class="ssdt"></div>-->
              <!--<div class="dataSsdt">-->
                <!--<ul>-->
                  <!--<li><span>社区市民反映私拉电线现象严重</span><span class="dataLi">2018-04-14</span></li>-->
                  <!--<li><span>社区市民反映私拉电线现象严重</span><span class="dataLi">2018-04-14</span></li>-->
                  <!--<li><span>社区市民反映私拉电线现象严重</span><span class="dataLi">2018-04-14</span></li>-->
                  <!--<li><span>社区市民反映私拉电线现象严重</span><span class="dataLi">2018-04-14</span></li>-->
                  <!--<li><span>社区市民反映私拉电线现象严重</span><span class="dataLi">2018-04-14</span></li>-->
                  <!--<li><span>社区市民反映私拉电线现象严重</span><span class="dataLi">2018-04-14</span></li>-->
                <!--</ul>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="clearfloat"></div>-->
          <!--<div class="SjMainLeftBottom">-->
            <!--<div class="ceng3"></div>-->
            <!--<div id="mainLeftBottomE"></div>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="SjMainCenter">-->
          <!--<div id="mapMain"></div>-->
          <!--<div class="SjMainCenterBottom">-->
            <!--<div class="ceng4"></div>-->
            <!--<div id="SjMainCenterBottomB"></div>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="mainRight">-->
          <!--<div class="mainRightTop">-->
            <!--<div class="ceng5"></div>-->
            <!--<div class="titleMainRightTop"></div>-->
            <!--<div class="textMainRightTop">通知公告</div>-->
            <!--<div style="display: flex;">-->
              <!--<div class="tzgg"></div>-->
              <!--<div class="dataTzgg">-->
                <!--<ul>-->
                  <!--<li><span>加强民生服务，解民忧</span><span class="dataLi2">2018-04-14</span></li>-->
                  <!--<li><span>加强民生服务，解民忧</span><span class="dataLi2">2018-04-14</span></li>-->
                  <!--<li><span>加强民生服务，解民忧</span><span class="dataLi2">2018-04-14</span></li>-->
                  <!--<li><span>加强民生服务，解民忧</span><span class="dataLi2">2018-04-14</span></li>-->
                  <!--<li><span>加强民生服务，解民忧</span><span class="dataLi2">2018-04-14</span></li>-->
                  <!--<li><span>加强民生服务，解民忧</span><span class="dataLi2">2018-04-14</span></li>-->
                <!--</ul>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="clearfloat"></div>-->
          <!--<div class="mainRightBottom">-->
            <!--<div class="ceng6"></div>-->
            <!--<div class="titleMainRightBottom"></div>-->
            <!--<div class="textMainRightBottom">区县事件上报排名</div>-->
            <!--<div id="sbpm"></div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</el-container>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
  <!--name: 'app',-->
  <!--data () {-->
    <!--return {-->
      <!--AMapUI: null,-->
      <!--AMap: null,-->
      <!--map: null-->
    <!--}-->
  <!--},-->
  <!--mounted () {-->
    <!--this.init()-->
    <!--this.mainLeftTopE()-->
    <!--this.mainLeftBottomE()-->
    <!--this.SjMainCenterBottomB()-->
    <!--this.sbpm()-->
  <!--},-->
  <!--methods: {-->
    <!--init () {-->
      <!--this.AMapUI = window.AMapUI-->
      <!--this.AMap = window.AMap-->
      <!--this.loadDistrictExplorer()-->
    <!--},-->
    <!--loadDistrictExplorer () {-->
      <!--let m = this-->
      <!--var opts = {-->
        <!--subdistrict: 1,-->
        <!--extensions: 'all',-->
        <!--level: 'district'-->
      <!--}-->
      <!--var district = new AMap.DistrictSearch(opts)-->
      <!--district.search('平桥区', function (status, result) {-->
        <!--var bounds = result.districtList[0].boundaries-->
        <!--var mask = []-->
        <!--let polygons = []-->
        <!--for (let i = 0; i < bounds.length; i += 1) {-->
          <!--var polygon = new AMap.Polygon({-->
            <!--strokeWeight: 1,-->
            <!--path: bounds[i],-->
            <!--fillOpacity: 0.4,-->
            <!--fillColor: '#1426a1',-->
            <!--strokeColor: '#0091ea'-->
          <!--})-->
          <!--polygons.push(polygon)-->
          <!--mask.push([bounds[i]])-->
        <!--}-->
        <!--m.map = new AMap.Map('mapMain', {-->
          <!--mask: mask,-->
          <!--center: [114.091104, 32.148489],-->
          <!--viewMode: '3D',-->
          <!--labelzIndex: 9999,-->
          <!--pitch: 40,-->
          <!--zoom: 10-->
        <!--})-->
        <!--m.map.setMapStyle('amap://styles/8d5705fe9baf14eec73c1a9d60bfbaad')-->
        <!--m.map.add(polygons)-->
        <!--let maskerIn = new AMap.Marker({-->
          <!--position: [114.091104, 32.148489]-->
        <!--})-->
        <!--m.map.add(maskerIn)-->
        <!--// 添加高度面-->
        <!--var object3Dlayer = new AMap.Object3DLayer({zIndex: 1})-->
        <!--m.map.add(object3Dlayer)-->
        <!--var height = -8000-->
        <!--var color = '#ccc'-->
        <!--var wall = new AMap.Object3D.Wall({-->
          <!--path: bounds,-->
          <!--height: height,-->
          <!--color: color-->
        <!--})-->
        <!--wall.transparent = true-->
        <!--object3Dlayer.add(wall)-->
      <!--})-->
    <!--},-->
    <!--mainLeftTopE () {-->
      <!--let mainLeftTopEEcharts = this.$echarts.init(document.getElementById('mainLeftTopE'))-->
      <!--mainLeftTopEEcharts.setOption({-->
        <!--color: ['#37A2DA', '#32C5E9', '#67E0E3'],-->
        <!--series: [{-->
          <!--name: '',-->
          <!--type: 'gauge',-->
          <!--detail: {-->
            <!--formatter: '{value}%',-->
            <!--textStyle: {-->
              <!--fontSize: '12px'-->
            <!--}-->
          <!--},-->
          <!--axisLine: {-->
            <!--show: true,-->
            <!--lineStyle: {-->
              <!--width: 2,-->
              <!--shadowBlur: 0,-->
              <!--color: [-->
                <!--[0.3, '#67e0e3'],-->
                <!--[0.7, '#37a2da'],-->
                <!--[1, '#fd666d']-->
              <!--]-->
            <!--}-->
          <!--},-->
          <!--data: [{-->
            <!--value: 50,-->
            <!--name: ''-->
          <!--}]-->
        <!--}]-->
      <!--})-->
    <!--},-->
    <!--mainLeftBottomE () {-->
      <!--let mainLeftBottomEEcharts = this.$echarts.init(document.getElementById('mainLeftBottomE'))-->
      <!--mainLeftBottomEEcharts.setOption({-->
        <!--title: {-->
          <!--text: '',-->
          <!--subtext: '',-->
          <!--x: 'center'-->
        <!--},-->
        <!--tooltip: {-->
          <!--trigger: 'item',-->
          <!--formatter: '{a} <br/>{b} : {c} ({d}%)'-->
        <!--},-->
        <!--calculable: true,-->
        <!--series: [-->
          <!--{-->
            <!--name: '面积模式',-->
            <!--type: 'pie',-->
            <!--radius: [30, 110],-->
            <!--roseType: 'area',-->
            <!--x: '50%',-->
            <!--max: 40,-->
            <!--sort: 'ascending',-->
            <!--data: [-->
              <!--{value: 10, name: '城建'},-->
              <!--{value: 5, name: '民政'},-->
              <!--{value: 15, name: '公安'},-->
              <!--{value: 25, name: '司法'},-->
              <!--{value: 20, name: '旅游'},-->
              <!--{value: 35, name: '质检'},-->
              <!--{value: 30, name: '农业'},-->
              <!--{value: 20, name: '安监'}-->
            <!--],-->
            <!--itemStyle: {-->
              <!--normal: {-->
                <!--color: function (params) {-->
                  <!--var colorList = [-->
                    <!--'#d0993a', '#fb812b', '#3dbb51', '#266bfc', '#d73332', '#1e408a', '#4095af', '#355298'-->
                  <!--]-->
                  <!--return colorList[params.dataIndex]-->
                <!--}-->
              <!--}-->
            <!--}-->
          <!--}-->
        <!--]-->
      <!--})-->
    <!--},-->
    <!--SjMainCenterBottomB () {-->
      <!--let mainCenterBottomBEcharts = this.$echarts.init(document.getElementById('SjMainCenterBottomB'))-->
      <!--mainCenterBottomBEcharts.setOption({-->
        <!--tooltip: {-->
          <!--trigger: 'axis',-->
          <!--axisPointer: {-->
            <!--type: 'shadow'-->
          <!--}-->
        <!--},-->
        <!--legend: {-->
          <!--y: 15,-->
          <!--data: ['已办结', '未办结'],-->
          <!--textStyle: {-->
            <!--color: 'white'-->
          <!--}-->
        <!--},-->
        <!--grid: {-->
          <!--left: '3%',-->
          <!--right: '4%',-->
          <!--bottom: '3%',-->
          <!--containLabel: true-->
        <!--},-->
        <!--xAxis: [-->
          <!--{-->
            <!--type: 'category',-->
            <!--data: ['婚恋家庭纠纷', '邻里纠纷', '人格权纠纷', '物权相关纠纷', '侵权相关纠纷', '合同及相关纠纷', '劳动人事争议', '金融借贷纠纷', '土地及资源权纠纷', '其他民商事纠纷'],-->
            <!--axisLabel: {-->
              <!--interval: 0,-->
              <!--rotate: 30,-->
              <!--textStyle: {-->
                <!--color: 'white'-->
              <!--}-->
            <!--}-->
          <!--}-->
        <!--],-->
        <!--yAxis: [-->
          <!--{-->
            <!--type: 'value',-->
            <!--name: '',-->
            <!--axisLine: {-->
              <!--lineStyle: {-->
                <!--color: 'white'-->
              <!--}-->
            <!--},-->
            <!--axisLabel: {-->
              <!--textStyle: {-->
                <!--color: 'white'-->
              <!--}-->
            <!--}-->
          <!--}-->
        <!--],-->
        <!--series: [-->
          <!--{-->
            <!--name: '已办结',-->
            <!--type: 'bar',-->
            <!--barWidth: 30,-->
            <!--stack: '性别',-->
            <!--data: [120, 132, 101, 134, 90, 120, 132, 101, 134, 90],-->
            <!--color: '#ff9944'-->
          <!--},-->
          <!--{-->
            <!--name: '未办结',-->
            <!--type: 'bar',-->
            <!--stack: '性别',-->
            <!--data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290],-->
            <!--color: '#f93d54'-->
          <!--}-->
        <!--]-->
      <!--})-->
    <!--},-->
    <!--sbpm () {-->
      <!--let sbpmEcharts = this.$echarts.init(document.getElementById('sbpm'))-->
      <!--sbpmEcharts.setOption({-->
        <!--tooltip: {-->
          <!--trigger: 'axis',-->
          <!--axisPointer: {-->
            <!--type: 'shadow'-->
          <!--}-->
        <!--},-->
        <!--legend: {-->
          <!--data: ['已办结', '未办结'],-->
          <!--// orient: 'vertical',-->
          <!--// x:'right',-->
          <!--y: 15,-->
          <!--padding: 2,-->
          <!--textStyle: {-->
            <!--color: 'white'-->
          <!--}-->
        <!--},-->
        <!--grid: {-->
          <!--left: '3%',-->
          <!--right: '4%',-->
          <!--bottom: '3%',-->
          <!--containLabel: true-->
        <!--},-->
        <!--xAxis: {-->
          <!--type: 'value',-->
          <!--splitLine: {-->
            <!--show: false-->
          <!--},-->
          <!--axisLine: {-->
            <!--// onZero: false,-->
            <!--lineStyle: {-->
              <!--color: 'white'-->
            <!--}-->
          <!--}-->
        <!--},-->
        <!--yAxis: {-->
          <!--type: 'category',-->
          <!--name: '地区',-->
          <!--data: ['南湾湖风景区', '鸡公山管理区', '羊山新区', '固始县', '淮滨县', '商城县', '罗山县', '新县', '息县', '光山县', '潢川县', '平桥区', '浉河区'],-->
          <!--axisLine: {-->
            <!--// onZero: false,-->
            <!--lineStyle: {-->
              <!--color: 'white'-->
            <!--}-->
          <!--}-->
        <!--},-->
        <!--series: [-->
          <!--{-->
            <!--name: '已办结',-->
            <!--type: 'bar',-->
            <!--barWidth: 20,-->
            <!--stack: '总量',-->
            <!--label: {-->
              <!--normal: {-->
                <!--show: true,-->
                <!--position: 'insideRight'-->
              <!--}-->
            <!--},-->
            <!--data: [430, 263, 302, 301, 334, 390, 320, 430, 263, 302, 301, 334, 210],-->
            <!--color: '#2d92d0'-->
          <!--},-->
          <!--{-->
            <!--name: '未办结',-->
            <!--type: 'bar',-->
            <!--stack: '总量',-->
            <!--label: {-->
              <!--normal: {-->
                <!--show: true,-->
                <!--position: 'insideRight'-->
              <!--}-->
            <!--},-->
            <!--data: [320, 221, 132, 101, 134, 90, 230, 320, 221, 132, 101, 134, 320],-->
            <!--color: '#3becce'-->
          <!--}-->
        <!--]-->
      <!--})-->
    <!--}-->
  <!--}-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.SjMain{-->
  <!--display: flex;-->
  <!--justify-content: center;-->
  <!--overflow-x: hidden;-->
<!--}-->
  <!--.SjmainLeft,.mainRight{-->
    <!--width: 30%;-->
    <!--/*height: 1000px;*/-->
  <!--}-->
  <!--.SjMainCenter{-->
    <!--width: 38%;-->
    <!--height: 400px;-->
    <!--margin-left: 10px;-->
    <!--margin-right: 10px;-->
  <!--}-->
  <!--.mainLeftTop{-->
    <!--width: 100%;-->
    <!--height: 200px;-->
    <!--position: relative;-->
    <!--margin-bottom: 10px;-->
    <!--display: flex;-->
    <!--justify-content: center;-->
  <!--}-->
  <!--.mainLeftCenter{-->
    <!--width: 100%;-->
    <!--height: 200px;-->
    <!--margin-bottom: 11px;-->
    <!--position: relative;-->
    <!--padding-top: 1px-->
  <!--}-->
  <!--.SjMainLeftBottom{-->
    <!--width: 100%;-->
    <!--height: 300px;-->
    <!--position: relative;-->
  <!--}-->
  <!--.ceng1,.ceng2,.ceng3,.ceng4,.ceng5,.ceng6{-->
    <!--width: 100%;-->
    <!--height: 100%;-->
    <!--position: absolute;-->
    <!--/*background: rgb(01, 33, 66);*/-->
    <!--background: #121d6a;-->
    <!--opacity: 0.2;-->
    <!--border: 1px solid #098be1;-->
    <!--border-radius: 6px;-->
  <!--}-->
  <!--#mainLeftTopE{-->
    <!--width: 100%;-->
    <!--height: 100%;-->
  <!--}-->
  <!--.titleMainLeftCenter{-->
    <!--width: 100%;-->
    <!--height: 20px;-->
    <!--background-image: url('~@/assets/bigdata/img/y_sj1.png');-->
    <!--background-repeat: no-repeat;-->
    <!--background-size: 100% 100%;-->
    <!--margin-top: 20px;-->
    <!--margin-bottom: 5px-->
  <!--}-->
  <!--.textMainLeftCenter{-->
    <!--color: white;-->
    <!--position: absolute;-->
    <!--top: 10px;-->
    <!--left: 6%;-->
  <!--}-->
  <!--.ssdt{-->
    <!--width: 20px;-->
    <!--height: 150px;-->
    <!--margin-left: 10px;-->
    <!--background-image: url('~@/assets/bigdata/img/y_sj2.png');-->
    <!--background-repeat: no-repeat;-->
    <!--background-size: 100% 100%;-->
    <!--/*float: left;*/-->
  <!--}-->
  <!--.dataSsdt{-->
    <!--/*float: left;*/-->
    <!--color: white;-->
    <!--font-size: 12px;-->
    <!--width: 80%;-->
    <!--margin-left: 4%;-->
    <!--margin-top: 0.5%;-->
  <!--}-->
<!--.dataLi{-->
  <!--float: right;-->
<!--}-->
<!--.dataSsdt ul li{-->
  <!--margin-bottom: 10px;-->
<!--}-->
<!--#mainLeftBottomE{-->
  <!--width: 100%;-->
  <!--height: 100%;-->
<!--}-->
  <!--#mapMain{-->
    <!--width: 100%;-->
    <!--height: 410px;-->
  <!--}-->
  <!--.SjMainCenterBottom{-->
    <!--width: 100%;-->
    <!--height: 300px;-->
    <!--margin-top: 12px;-->
    <!--position:relative;-->
  <!--}-->
  <!--#SjMainCenterBottomB{-->
    <!--width: 100%;-->
    <!--height: 100%;-->
  <!--}-->
  <!--.mainRightTop{-->
    <!--width: 100%;-->
    <!--height: 200px;-->
    <!--position: relative;-->
    <!--padding-top: 1px-->
  <!--}-->
  <!--.titleMainRightTop{-->
    <!--width: 100%;-->
    <!--height: 20px;-->
    <!--background-image: url('~@/assets/bigdata/img/y_sj1.png');-->
    <!--background-repeat: no-repeat;-->
    <!--background-size: 100% 100%;-->
    <!--margin-top: 20px;-->
    <!--margin-bottom: 5px-->
  <!--}-->
  <!--.textMainRightTop{-->
    <!--color: white;-->
    <!--position: absolute;-->
    <!--top: 10px;-->
    <!--left: 5%;-->
  <!--}-->
  <!--.tzgg{-->
    <!--width: 20px;-->
    <!--height: 150px;-->
    <!--margin-left: 10px;-->
    <!--background-image: url('~@/assets/bigdata/img/y_sj2.png');-->
    <!--background-repeat: no-repeat;-->
    <!--background-size: 100% 100%;-->
    <!--/*float: left;*/-->
  <!--}-->
<!--.dataTzgg{-->
  <!--/*float: left;*/-->
  <!--color: white;-->
  <!--font-size: 12px;-->
  <!--width: 80%;-->
  <!--margin-left: 4%;-->
  <!--margin-top: 0.5%;-->
<!--}-->
<!--.dataLi2{-->
  <!--float: right;-->
<!--}-->
<!--.dataTzgg ul li{-->
  <!--margin-bottom: 10px;-->
<!--}-->
  <!--.mainRightBottom{-->
    <!--width: 100%;-->
    <!--height: 508px;-->
    <!--margin-top: 11px;-->
    <!--position: relative;-->
    <!--padding-top: 1px-->
  <!--}-->
  <!--.titleMainRightBottom{-->
    <!--width: 100%;-->
    <!--height: 20px;-->
    <!--background-image: url('~@/assets/bigdata/img/y_sj3.png');-->
    <!--background-repeat: no-repeat;-->
    <!--background-size: 100% 100%;-->
    <!--margin-top: 20px;-->
    <!--/*margin-bottom: 20px*/-->
  <!--}-->
  <!--.textMainRightBottom{-->
    <!--color: white;-->
    <!--position: absolute;-->
    <!--top: 10px;-->
    <!--left: 7%;-->
  <!--}-->
  <!--#sbpm{-->
    <!--width: 100%;-->
    <!--height: 95%;-->
  <!--}-->
<!--.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}-->
<!--</style>-->
<style scoped>
.main{
  width: 100%;
  /* height: 100%; */
  background-image: url('~@/assets/bigdata/img/mssj.png');
  background-repeat: no-repeat;
  background-size: 100% 101%;
}
.main img {
  width: 100%
}
</style>
